<template>
  <div id="addQuestionView">
    <h2>创建题目</h2>
    <a-form :model="form">
      <a-form-item field="title" label="题目标题" required>
        <a-input v-model="form.title" placeholder="请输入题目标题" />
      </a-form-item>
      <a-form-item field="tags" label="题目标签">
        <a-input-tag
          v-model="form.tags"
          placeholder="请输入题目标签"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="content" tooltip="请输入题目内容" label="题目内容">
        <MdEditor :value="form.content" :handle-change="handleContentChange" />
      </a-form-item>
      <a-form-item field="answer" tooltip="请输入答案" label="答案">
        <MdEditor :value="form.answer" :handle-change="handleAnswerChange" />
      </a-form-item>
      <a-form-item label="判题配置" :content-flex="false" :merge-props="false">
        <a-space direction="vertical" style="min-width: 580px">
          <a-form-item
            field="judgeConfig.timeLimit"
            label="时间限制(ms)"
            required
          >
            <a-input-number
              v-model="form.judgeConfig.timeLimit"
              placeholder="请输入时间限制"
              mode="button"
              :min="0"
            />
          </a-form-item>
          <a-form-item
            field="judgeConfig.memoryLimit"
            label="内存限制(kb)"
            required
          >
            <a-input-number
              v-model="form.judgeConfig.memoryLimit"
              placeholder="请输入内存限制"
              mode="button"
              :min="0"
            />
          </a-form-item>
          <a-form-item
            field="judgeConfig.stackLimit"
            label="堆栈限制(kb)"
            required
          >
            <a-input-number
              v-model="form.judgeConfig.stackLimit"
              placeholder="请输入堆栈限制"
              mode="button"
              :min="0"
            />
          </a-form-item>
        </a-space>
      </a-form-item>
      <a-form-item label="判题用例">
        <div style="display: flex; flex-direction: column; gap: 16px">
          <a-card
            v-for="(judgeCase, index) of form.judgeCase"
            :key="index"
            :title="`用例${index + 1}`"
            style="margin-bottom: 16px; min-width: 400px"
          >
            <a-space direction="vertical" style="width: 100%">
              <a-form-item
                :field="`judgeCase[${index}].input`"
                label="输入"
                required
              >
                <a-textarea
                  v-model="judgeCase.input"
                  placeholder="请输入测试输入"
                  :auto-size="{ minRows: 2 }"
                />
              </a-form-item>
              <a-form-item
                :field="`judgeCase[${index}].output`"
                label="输出"
                required
              >
                <a-textarea
                  v-model="judgeCase.output"
                  placeholder="请输入期望输出"
                  :auto-size="{ minRows: 2 }"
                />
              </a-form-item>
              <a-button status="danger" @click="deleteJudgeCase(index)"
                >删除用例
              </a-button>
            </a-space>
          </a-card>
          <a-button @click="addJudgeCase">新增判题用例</a-button>
          <a-button @click="resetForm">重置</a-button>
        </div>
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" @click="onSubmit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import MdEditor from "@/components/MdEditor.vue";
import { Message } from "@arco-design/web-vue";
import { QuestionControllerService } from "../../../generated";
import { useRoute } from "vue-router";
import router from "@/router";

const form = ref({
  id: -1 as number | undefined,
  answer: "",
  content: "",
  tags: [],
  title: "",
  judgeCase: [
    {
      input: "",
      output: "",
    },
  ],
  judgeConfig: {
    memoryLimit: 0,
    stackLimit: 0,
    timeLimit: 0,
  },
});
const route = useRoute();
const updatePage = route.path.includes("update");

const loadData = async () => {
  const id = route.query.id;
  const res = await QuestionControllerService.getQuestionByIdUsingGet(
    id as any
  );
  if (res.code === 0) {
    form.value = {
      id: res.data?.id,
      answer: res.data?.answer ?? "",
      content: res.data?.content ?? "",
      tags: res.data?.tags ? JSON.parse(res.data.tags) : [],
      title: res.data?.title ?? "",
      judgeCase: res.data?.judgeCase
        ? JSON.parse(res.data.judgeCase)
        : [
            {
              input: "",
              output: "",
            },
          ],
      judgeConfig: res.data?.judgeConfig
        ? JSON.parse(res.data.judgeConfig)
        : {
            memoryLimit: 10,
            stackLimit: 10,
            timeLimit: 10,
          },
    };
  } else {
    Message.error("未知错误" + res.message);
  }
};

const resetForm = () => {
  form.value = {
    id: -1,
    answer: "",
    content: "",
    tags: [],
    title: "",
    judgeCase: [
      {
        input: "",
        output: "",
      },
    ],
    judgeConfig: {
      memoryLimit: 0,
      stackLimit: 0,
      timeLimit: 0,
    },
  };
};
const onSubmit = async () => {
  // 这里应该添加提交逻辑
  console.log("提交表单:", form);
  if (updatePage) {
    // form.value.id = route.query.id as any;
    let res = await QuestionControllerService.updateQuestionUsingPost(
      form.value
    );
    if (res.code === 0) {
      Message.success("题目更新成功");
      await router.push("/manage/question");
    } else {
      Message.error("未知错误" + res.message);
    }
  } else {
    let res = await QuestionControllerService.addQuestionUsingPost(form.value);
    if (res.code === 0) {
      Message.success("题目创建成功");
    } else {
      Message.error("未知错误" + res.message);
    }
  }
};
const addJudgeCase = () => {
  form.value.judgeCase.push({
    input: "",
    output: "",
  });
};

const deleteJudgeCase = (index: number) => {
  form.value.judgeCase.splice(index, 1);
};
const handleAnswerChange = (value: string) => {
  form.value.answer = value;
};
const handleContentChange = (value: string) => {
  form.value.content = value;
};

onMounted(() => {
  if (updatePage) {
    loadData();
  }
});
</script>

<style scoped>
#addQuestionView {
  padding: 20px;
}
</style>
